<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的模板</title>

</head>

<body>


    <div id="app">
        <!-- 类似于类加载 只有离开焦点或者点击回车才可以触发双向绑定节约性能
				修饰符1:lazy
			 -->
        <input type="text" v-model.lazy="msg"> {{msg}}

        <!-- 修饰符2:number -->
        <input type="number" v-model.number="age"> {{age}}


        <!-- 修饰符3:trim 去除空格 只能去除首尾 -->
        <input type="text" v-model.trim="name"> {{name}}
    </div>


</body>



<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: '洪潇涵',
            age: '',
            name: '',
        },
    })
</script>